<!DOCTYPE html>
<html lang="en">
<head>
  	<title>CSS3 Tricks</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body>
<!-- PRO Framework Panel Begin -->
<!-- <div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><a href="" class="pro_logo"></a><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul><li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li><a href="layouts.html">Layouts</a></li><li><a href="typography.html">Typography</a></li><li><a href="portfolio.html">Gallery Layouts<span></span></a><ul><li><a href="portfolio.html">Portfolio</a></li><li><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li><a href="functional-slider.html">Functional Slider</a></li></ul></li><li><a href="gallery-page1.html">Gallery</a></li></ul></li><li class="current"><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li class="current"><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="clear"></div></div></div><div class="bg_pro2"></div></div> -->
<!-- PRO Framework Panel End -->
<div class="bg-main">
<!--==============================header=================================-->
	<header>
		<div class="container_24">
			<div class="wrapper">
				<div class="grid_17">
					<h1><a href="index.html">Idealex</a></h1>
				</div>
				<div class="grid_7">
					<form id="search2">
						 <div class="fleft"><input type="text"></div>
						 <a onClick="document.getElementById('search2').submit()">search</a>
					</form>
				</div>
			</div>
		</div>
		<nav class="main-menu">
			<ul class="sf-menu">
				<li><a href="index.html"><em>about Us</em><strong></strong></a><ul>
						<li><a href="more.html">Who We Are</a></li>
						<li><a href="more.html">News</a></li>
						<li><a href="more.html">Products</a></li>
					</ul>
				</li>
				<li><a href="index-1.html"><em>services</em><strong></strong></a></li>
				<li><a href="index-2.html"><em>solutions</em><strong></strong></a></li>
				<li><a href="index-3.html"><em>Training</em><strong></strong></a></li>
				<li><a href="index-4.html"><em>support</em><strong></strong></a></li>
				<li><a href="index-5.html"><em>Clients</em><strong></strong></a></li>
				<li class="last"><a href="index-6.html"><em>contacts</em><strong></strong></a></li>
			</ul>
			<div class="clear"></div>
		</nav>
	</header>
<!--==============================section=================================-->
	<section class="padsection7">
	<div class="container_24">
<!--  Hovers Begin -->
		<div class="wrapper"><div class="grid_24"><h1 class="title3">CSS3 Tricks</h1>
			<h3>Please note that this will only work properly in modern browsers that support the CSS3 properties in use.</h3>
			<h2 class="title3">Animated Hovers</h2></div>
		</div>
		<div class="wrapper">
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_first">
					 <img src="images/stock_images/300x200_1.jpg" alt="" />
					 <div class="mask">
						<h2>First Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					 </div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_second">
					 <img src="images/stock_images/300x200_2.jpg" alt="" />
					<div class="mask"></div>
					<div class="content">
						<h2>Second Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					</div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_third">
					 <img src="images/stock_images/300x200_3.jpg" alt="" />
					<div class="mask"></div>
					<div class="content">
						<h2>Third Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="wrapper">
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_fourth">
					 <img src="images/stock_images/300x200_4.jpg" alt="" />
					 <div class="mask">
						<h2>Fourth Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					 </div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_fifth">
					 <img src="images/stock_images/300x200_5.jpg" alt="" />
					<div class="mask">
						<div class="content">
						<h2>Fifth Hover</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
							<a href="" class="btn">Button</a>
						</div>
					</div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_sixth">
					 <img src="images/stock_images/300x200_6.jpg" alt="" />
					<div class="mask"></div>
					<div class="content">
						<h2>Sixth Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="wrapper">
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_seventh">
					 <img src="images/stock_images/300x200_7.jpg" alt="" />
					 <div class="mask">
						<h2>Seventh Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					 </div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_eighth">
					 <img src="images/stock_images/300x200_8.jpg" alt="" />
					<div class="mask">
						<div class="content">
						<h2>Eighth Hover</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
							<a href="" class="btn">Button</a>
						</div>
					</div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="wrapper">
				<div class="view view_ninth">
					 <img src="images/stock_images/300x200_1.jpg" alt="" />
					<div class="mask mask-1"></div>
					<div class="mask mask-2"></div>
					<div class="content">
						<h2>Ninth Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="" class="btn">Button</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="wrapper"><div class="grid_24">
		<dl class="description-box description-box-pad">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>The structure of markup is very simple and intuitive. Create a container that will have our image and all the other infomation.</p>
<pre class="htmlCode"><div class="view view_first">
	<img src="YourImage.jpg" alt="" />
	<div class="mask">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="" class="btn">Button</a>
	</div>
</div></pre>
<p class="descr_pad">Add the special class view_first to the element with the class view for the first effect.<br>
<p>In the <strong>second hover</strong> we will add the special class view-second, but we will leave the element with the class mask empty and wrap the description in a div with the class content</p>
<pre class="htmlCode"><div class="view view_second">
	<img src="YourImage.jpg" alt="" />
	<div class="mask"></div>
	<div class="content">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="" class="btn">Button</a>
	</div>
</div></pre>
<p class="descr_pad">For other hover effects you can use the same HTML structure. You only need to change class <strong>view_second</strong> to the following ones:<br>
<strong>view_third</strong> - third effect<br>
<strong>view_fourth</strong> - fourth effect<br>
<strong>view_fifth</strong> - fifth effect<br>
<strong>view_sixth</strong> - sixth effect<br>
<strong>view_seventh</strong> - seventh effect<br>
<strong>view_eight</strong> - eight effect<br></p>
<p>In <strong>ninth hover</strong>, we will use two mask elements to slide them in from the bottom right and the top left:</p>
<pre class="htmlCode"><div class="view view_ninth">
	<img src="YourImage.jpg" alt="" />
	<div class="mask mask-1"></div>
	<div class="mask mask-2"></div>
	<div class="content">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="" class="btn">Button</a>
	</div>
</div></pre>
<p>Define .view and .mask width and height which match image`s width and height in style.css file.</p>
<p>CSS3 has a really great potential for creating nice effects. Soon, we’ll hopefully be able to avoid the use of JavaScript for simple effects and rely 100% on CSS, in all browsers.</p>
						</div>
					</dd>
				</dl>
		</div></div>
<!--  Hovers End -->
		<div class="wrapper">
<!--  Buttons Begin -->
			<div class="grid_24"><h2 class="title">Animated Buttons</h2></div>
		</div>
		<div class="wrapper">
			<div class="grid_24"><p>Add necessary class to the <strong><a> </strong>tag (<a href="" class=""> Button Text </a>)</p></div>
		</div>
		<div class="">
			<div class="grid_6">
				<div class="buttons_pad"><a href="" class="btn style_1 notClicked">Click me!</a><code class="small-box-code2">class="btn style_1"</code></div>
				<div class="buttons_pad"><a href="" class="btn warning style_1 notClicked">Click me!</a><code class="small-box-code2">class="btn warning style_1"</code></div>
				<div class="buttons_pad"><a href="" class="btn success style_1 notClicked">Click me!</a><code class="small-box-code2">class="btn success style_1"</code></div>
				<div class="buttons_pad"><a href="" class="btn danger style_1 notClicked">Click me!</a><code class="small-box-code2">class="btn danger style_1"</code></div>
				<div class="buttons_pad"><a href="" class="btn inf style_1 notClicked">Any button may be longer</a><code class="small-box-code2">class="btn inf style_1"</code></div>
			</div>
			<div class="grid_6">
				<div class="buttons_pad"><a href="" class="btn style_2 notClicked">Click me!</a><code class="small-box-code2">class="btn style_2"</code></div>
				<div class="buttons_pad"><a href="" class="btn warning style_2 notClicked">Click me!</a><code class="small-box-code2">class="btn warning style_2"</code></div>
				<div class="buttons_pad"><a href="" class="btn success style_2 notClicked">Any button may be longer</a><code class="small-box-code2">class="btn success style_2"</code></div>
				<div class="buttons_pad"><a href="" class="btn danger style_2 notClicked">Click me!</a><code class="small-box-code2">class="btn danger style_2"</code></div>
				<div class="buttons_pad"><a href="" class="btn inf style_2 notClicked">Click me!</a><code class="small-box-code2">class="btn inf style_2"</code></div>
			</div>
			<div class="grid_6">
				<div class="buttons_pad"><a href="" class="btn style_3 notClicked">Click me!</a><code class="small-box-code2">class="btn style_3"</code></div>
				<div class="buttons_pad"><a href="" class="btn warning style_3 notClicked">Click me!</a><code class="small-box-code2">class="btn warning style_3"</code></div>
				<div class="buttons_pad"><a href="" class="btn success style_3 notClicked">Click me!</a><code class="small-box-code2">class="btn success style_3"</code></div>
				<div class="buttons_pad"><a href="" class="btn danger style_3 notClicked">Any button may be longer</a><code class="small-box-code2">class="btn danger style_3"</code></div>
				<div class="buttons_pad"><a href="" class="btn inf style_3 notClicked">Click me!</a><code class="small-box-code2">class="btn inf style_3"</code></div>
			</div>
			<div class="grid_6">
				<div class="buttons_pad"><a href="" class="btn style_4 notClicked">Click me!</a><code class="small-box-code2">class="btn style_4"</code></div>
				<div class="buttons_pad"><a href="" class="btn warning style_4 notClicked">Any button may be longer</a><code class="small-box-code2">class="btn warning style_4"</code></div>
				<div class="buttons_pad"><a href="" class="btn success style_4 notClicked">Click me!</a><code class="small-box-code2">class="btn success style_4"</code></div>
				<div class="buttons_pad"><a href="" class="btn danger style_4 notClicked">Click me!</a><code class="small-box-code2">class="btn danger style_4"</code></div>
				<div class="buttons_pad"><a href="" class="btn inf style_4 notClicked">Click me!</a><code class="small-box-code2">class="btn inf style_4"</code></div>
			</div>
			<div class="clear"></div>
		</div>
<!--  Buttons End -->
<!--  Images Styles Begin -->
		<div class="">
			<div class="grid_14">
				<h2 class="title">CSS3 Images Style</h2>
				<div class="pad-image"><span class="image_round normaltip" title="Circle Image"></span></div>
				<div class="pad-image"><span class="image_card normaltip" title="Card Style"></span></div>
				<div class="pad-image"><span class="image_embossed normaltip" title="Embossed Style"></span></div>
				<div class="pad-image"><span class="image_soft-embossed normaltip" title="Soft Embossed Style"></span></div>
				<div class="pad-image"><span class="image_cut_out normaltip" title="Cutout Style"></span></div>
				<div class="pad-image"><span class="image_morphing_glowing normaltip" title="Morphing &amp; Glowing"></span></div>
				<div class="pad-image"><span class="image_glossy normaltip" title="Glossy Overlay"><span></span></span></div>
				<div class="pad-image"><span class="image_reflection normaltip" title="Reflection"><span></span></span></div>
				<div class="clear"></div>
				<dl class="description-box description-box-pad">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly.</p>
						<p>To add such images to the page you need to copy the code and in the style.css file define background image and image dimensions.</p>
						<p>HTML</p>				
						<p><strong>Circle Image</strong></p>
<pre class="htmlCode"><span class="image_round"></span></pre>
						<p><strong>Card Style</strong></p>
<pre class="htmlCode"><span class="image_card"></span></pre>
						<p><strong>Embossed Style</strong></p>
<pre class="htmlCode"><span class="image_embossed"></span></pre>
						<p><strong>Soft Embossed Style</strong></p>
<pre class="htmlCode"><span class="image_soft-embossed"></span></pre>
						<p><strong>Cutout Style</strong></p>
<pre class="htmlCode"><span class="image_cut_out"></span></pre>
						<p><strong>Morphing &amp; Glowing</strong></p>
<pre class="htmlCode"><span class="image_morphing_glowing"></span></pre>
						<p><strong>Glossy Overlay</strong></p>
<pre class="htmlCode"><span class="image_glossy"></span></pre>
						<p><strong>Reflection</strong></p>
<pre class="htmlCode"><span class="image_reflection"></span></pre>
						<p>CSS</p>
<pre class="cssCode">.YourStyle{
background:url(YourImage.jpg) 0 0 no-repeat;
width:YourImageWidth px;
height:YourImageHeight px;
}</pre>		
						</div>
					</dd>
				</dl>
			</div>
<!--  Images Styles End -->
<!--  Shadows Begin -->
			<div class="grid_10">
				<h2 class="title">Shadows on CSS3</h2>
				<div class="pad-shadow"><div class="lifted"><div class="text-shadow">Lifted Shadow</div></div></div>
				<div class="pad-shadow"><div class="perspective"><div class="text-shadow">Perspective Shadow</div></div></div>
				<div class="pad-shadow"><div class="raised"><div class="text-shadow">Raised Block</div></div></div>
				<div class="pad-shadow"><div class="curved-vt-2"><div class="text-shadow">Shadow with two vertical curves</div></div></div>
				<div class="pad-shadow"><div class="curved-hz-2"><div class="text-shadow">Shadow with two horizontal curves</div></div></div>
				<dl class="description-box description-box-pad">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p><strong>Lifted Shadow</strong></p>
<pre class="htmlCode"><div class="lifted">
	<div class="text-shadow">Text</div>
</div></pre>
						<p><strong>Perspective Shadow</strong></p>
<pre class="htmlCode"><div class="perspective">
	<div class="text-shadow">Text</div>
</div></pre>
						<p><strong>Raised Block</strong></p>
<pre class="htmlCode"><div class="raised">
	<div class="text-shadow">Text</div>
</div></pre>
						<p><strong>Shadow with two vertical curves</strong></p>
<pre class="htmlCode"><div class="curved-vt-2">
	<div class="text-shadow">Text</div>
</div></pre>
						<p><strong>Shadow with two horizontal curves</strong></p>
<pre class="htmlCode"><div class="curved-hz-2">
	<div class="text-shadow">Text</div>
</div></pre>
						</div>
					</dd>
				</dl>
			</div>
<!--  Shadows End -->
			<div class="clear"></div>
		</div>
	</div>
</section>	
</div>
<!--==============================footer=================================-->
<footer>
	<div class=" container_24">
		<div class="wrapper">
			<div class="grid_6 suffix_2">
				<h1 class="footer-logo"><a href="index.html">idealex</a></h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ultricies odio magna.</p>
				<p class="color1 privacy">&copy; 2012 <span>|</span>  <a href="index-7.html">Privacy Policy</a> <!-- {%FOOTER_LINK} --></p>
			</div>
			<div class="grid_7 suffix_2">
				<h4>Related Links</h4>
				<div class="wrapper">
					<div class="grid_4 alpha">
						<ul class="footer-list">
							<li><a href="more.html">About Us</a></li>
							<li><a href="more.html">Testimonials</a></li>
							<li><a href="more.html">Our Staff</a></li>
							<li><a href="more.html">Events &amp; Press</a></li>
							<li><a href="more.html">Contact Us</a></li>
						</ul>
					</div>
					<div class="grid_3 omega">
						<ul class="footer-list">
							<li><a href="more.html">Sign Up</a></li>
							<li><a href="more.html">Forums</a></li>
							<li><a href="more.html">Affiliate Program</a></li>
							<li><a href="more.html">FAQ</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="grid_7">
				<h4>Follow Us</h4>
				<ul class="tooltips">
					<li><a href="more.html"><img src="images/icon1.png" alt=""><span>RSS</span></a></li>
					<li><a href="more.html"><img src="images/icon3.png" alt=""><span>Facebook</span></a></li>
					<li><a href="more.html"><img src="images/icon2.png" alt=""><span>Twitter</span></a></li>
				</ul>
			</div>
		</div>
	</div>
</footer>
</body>
</html>